<!--
 * @Author: zzy zhangzeyang@huidr.com
 * @Date: 2025-03-03 17:49:53
 * @LastEditors: zzy zhangzeyang@huidr.com
 * @LastEditTime: 2025-03-13 19:13:26
 * @FilePath: \about_vue\src\views\Account.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- <div>
        <p>当前值: {{ count }}</p>
        <p>上一个值: {{ alwaysSmall }}</p>
        <button @click="increment">增加</button>
    </div> -->

    <div>
    <ul>
      <li v-for="item in items" :key="item" :ref="item">{{ item }}</li>
    </ul>
    <button @click="reverseItems">反转列表</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            count: 2,
            items: ['A', 'B', 'C']
        }
    },
    computed: {
        // 这个计算属性在 count 的值小于或等于 3 时，将返回 count 的值。
        // 当 count 的值大于等于 4 时，将会返回满足我们条件的最后一个值
        // 直到 count 的值再次小于或等于 3 为止。
        alwaysSmall(previous) {
            if (this.count <= 3) {
                return this.count
            }

            return previous
        }
    },

    mounted(){
        console.log(this.$refs.A);
        console.log(this.$refs.B);
        console.log(this.$refs.C);
    },

    methods:{
        increment(){
            this.count++;
        },
        reverseItems() {
      this.items.reverse();
    }
    }   
}
</script>